<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :modal="false"
    :show-close="false"
    top="0"
    custom-class="dialog"
    :width="widthLength"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div
      slot="title"
    />
    <slot name="title" />
    <slot />
    <div
      slot="footer"
    >
      <slot name="footer" />
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'SimpleDataDialog',
  props: {
    visible: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: null
    },
    size: {
      type: String,
      default: 'small',
      validator: value => ['small', 'middle', 'big', 'large'].indexOf(value) > -1
    }
  },
  data() {
    return {
      dialogVisible: true,
      width: 400
    }
  },
  computed: {
    widthLength() {
      return this.getSize(this.size)
    }
  },
  watch: {
    visible: {
      handler(val) {
        this.dialogVisible = val
      },
      deep: true
    },
    dialogVisible: {
      handler(val) {
        this.$emit('update:visible', val)
      },
      deep: true
    }
  },
  created() {
    this.dialogVisible = this.visible
  },
  methods: {
    getSize(name) {
      if (name === 'small') {
        return '30%'
      }
      if (name === 'middle') {
        return '50%'
      }
      if (name === 'big') {
        return '60%'
      }
      if (name === 'large') {
        return '70%'
      }
      return name
    }
  }
}
</script>

<style scoped>

</style>
